import React, { PureComponent } from 'react';
import api from '../../../../../../api/api';
import { Radio, Modal, DatePicker, message } from 'antd';
import Form from '@wanhu/antd-legacy/lib/form';
import './diagnose-record-edit.less';
import moment from 'moment';
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
export default class DiagnoseRecordEdit extends PureComponent {
     constructor(props) {
        super(props);
         this.state = {
            medicalId:'',
            isSick: '',
             useDrug: '',
             medicalDate: undefined,
            mainData: {},
        }
    }
    componentDidMount() {
        this.getDiagnoseRecords()
    }
    onChange = (e,key) => {
        const { mainData } = this.state;
        let newData = mainData;
        if (!mainData.date) {
            Modal.error({
                title: "请先选择就诊日期",
            });
            return;
        }
        newData[key] = e.target.value;
        this.setState({
            [key]:e.target.value
        }, () => {
            this.updata();
        })
    }
    getDiagnoseRecords = async () => {
        const { patientId } = this.props;
        const data = await api.getPatientDiagnoseRecords(patientId);
        if (data && data.length > 0) {
            let { isSick, useDrug, medicalId, date } = data[0];
            this.setState({
                mainData:data[0]
            })
            this.setState({
                isSick,
                useDrug,
                medicalId,
                medicalDate:date
            })
        }
    }
    updata = async () => {
        const { mainData, medicalId } = this.state;
        const { patientId } = this.props;
        let toCreate = mainData;
        if (mainData && mainData.id) {
            try {
                await api.updateDiagnoseRecord(mainData.id, toCreate);
                message.success('更新成功')
                this.getDiagnoseRecords()
            } catch (e) {
                message.success(e.message?e.message:'更新失败')
            }
            return false;
        }
        try {
            toCreate.medicalHistorys = []
            await api.createDiagnoseRecord(patientId,toCreate);
            message.success('更新成功')
            this.getDiagnoseRecords()
        } catch (e) {
            message.success(e.message?e.message:'更新失败')
        }
    }
    dateChange = (value,str) => {
        const { mainData } = this.state;
        let newData = mainData;
        // node转发时候接收的date，后端返显的时候用的medicalDate，转来转去有点晕
        newData.date = str;
        newData.medicalDate = str;
        this.setState({
            medicalDate: str,
            mainData:newData
        })
    }
    render() {
        const { isSick, useDrug, medicalDate } = this.state;
        return (
            <div className="diagnose-record-container">
                <FormItem
                    label="就诊日期"
                    colon={false}
                    className="width200"
                >
                    <DatePicker onChange={(value,str)=>this.dateChange(value,str)} placeholder="就诊日期"  value={medicalDate?moment(medicalDate, dateFormat):undefined} />
                </FormItem>
                <FormItem
                    label="身体状况"
                    colon={false}
                    className="width200 labelWidth"
                >
                    <Radio.Group onChange={(value) => this.onChange(value,'isSick')} value={ isSick }>
                        <Radio.Button value={0}>健康</Radio.Button>
                        <Radio.Button value={ 1 }>已确诊患病</Radio.Button>
                    </Radio.Group>
                </FormItem>
                <FormItem
                    label="目前是否在服药物"
                    className="width200 wordrows labelWidth"
                    colon={false}
                >
                    <Radio.Group onChange={(value)=>this.onChange(value,'useDrug')} value={ useDrug }>
                        <Radio.Button value={ 0 }>否</Radio.Button>
                        <Radio.Button value={ 1 }>是</Radio.Button>
                    </Radio.Group>
                </FormItem>
            </div>
        );
    }
}
